<template>
  <a-modal
    :visible="visible"
    :title="current ? '编辑' : '新增'"
    okText="确认无误并提交"
    cancelText="取消"
    @ok="handleOk"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :maskClosable="false"
  >
    <a-form :form="form" layout="horizontal" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
      <a-form-item label="用户名">
        <a-input v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]" />
      </a-form-item>
      <a-form-item label="密码">
        <a-input-password v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]" />
      </a-form-item>
      <a-form-item label="手机号">
        <a-input v-decorator="['mobile', { rules: [{ required: true, message: '请输入手机号' }] }]" />
      </a-form-item>
      <a-form-item label="角色权限">
        <a-select
          v-decorator="['role', { rules: [{ required: true, message: '请选择角色' }] }]"
          style="width: 100%"
          placeholder="请选择角色"
        >
          <a-select-option v-for="item in roleListOptions" :key="item.value" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: 'AddModal',
  props: {
    visible: Boolean,
    current: Object,
    roleListOptions: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      form: this.$form.createForm(this)
    }
  },
  watch: {
    current (val) {
      if (val) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            // action_list: val.action_list.map(item => item.id)
          })
        })
      }
    }
  },
  methods: {
    handleOk () {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        this.$emit('ok', values)
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.$emit('cancel')
    }
  }
}
</script>
